<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>驴妈妈流立方</title>
    <meta name="description" content="overview &amp; stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
    <script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
    <script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
    <script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
    <script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
    <script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
    <script src="${rc.contextPath}/assets/js/spin.min.js"></script>
    <!-- ace scripts -->
    <script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
    <script src="${rc.contextPath}/assets/js/ace.min.js"></script>
    <!-- validator scripts -->
    <script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
    <!-- user scripts -->
    <script src="${rc.contextPath}/assets/js/user/base.js"></script>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css"/>
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css"/>
    <!-- text fonts -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css"/>
    <!-- BootstrapValidator -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css"/>
    <!-- ace styles -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet"
          id="main-ace-style"/>
    <!-- ace settings handler -->
    <script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css"/>

</head>

<body class="no-skin" style="background-color: #FFF;">
<div class="page-content">
    <div class="page-search-area">
        <div class="widget-box">
            <div class="widget-body" style="background-color: #EFF3F8;">
                <div class="widget-main">
                    <form class="form-horizontal" id="searchForm" method="post"
                          action="${rc.contextPath}/deviceInfoQuery/list">
                        <div class="row">
                            <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <div class="form-group no-margin">
                                    <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label no-padding-left"
                                           for="deviceToken">设备标识</label>
                                    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 no-padding">
                                        <input type="text" id="deviceToken" name="deviceToken"
                                               class="form-control" placeholder="请输入设备标识（deviceToken）"
                                               value="${conditionVO.deviceToken}"/>

                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <div class="form-group no-margin">
                                    <label class="sr-only"></label>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding">
                                        <button type="button" class="btn btn-pink btn-sm" id="searchBtn">
                                            <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                            查询
                                        </button>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="row" id="failuerTable">
            <div class="col-xs-12">
                <div class="widget-box">
                    <!--<div class="widget-header widget-header-small">-->
                    <!--</div>-->
                    <div class="row">
                        <div class="col-xs-12">
                            <div style="width: 100%; margin: 0 auto;overflow-x: scroll">
                                <table id="dynamic-table"
                                       class="table table-striped table-bordered table-hover dataTable no-footer"
                                       role="grid" aria-describedby="dynamic-table_info">
                                    <thead>
                                    <#if deviceInfoTitles?? && deviceInfoTitles?size&gt;0>
                                        <tr>
                                            <#list deviceInfoTitles as deviceInfoTitle>
                                                <th style="text-align: center;" colspan="2">${deviceInfoTitle!}</th>
                                            </#list>
                                        </tr>
                                    </#if>
                                    <#if deviceInfoTitles?? && deviceInfoTitles?size&gt;0>
                                        <tr>
                                            <#list deviceInfoTitles as deviceInfoTitle>
                                                <th>
                                                    <div style="width:140px;text-align: center;">timestamp</div>
                                                </th>
                                                <th>
                                                    <div style="width:300px;text-align: center;">value</div>
                                                </th>
                                            </#list>
                                        </tr>
                                    </#if>
                                    </thead>

                                    <tbody>
                                    <#if deviceInfos?? && deviceInfos?size&gt;0>
                                        <#list deviceInfos as deviceInfo>
                                            <tr class="">
                                                <#list deviceInfo as device>
                                                    <td style="text-align: center;">${device!}</td>
                                                </#list>
                                            </tr>
                                        </#list>
                                        <#else>
                                            <tr>
                                                <td colspan="12">
                                                    <div class="alert alert-danger" style="margin-bottom: 0px;"
                                                         role="alert">没有记录!
                                                    </div>
                                                </td>
                                            </tr>
                                    </#if>
                                    </tbody>
                                </table>
                                <!--<#include "paginator.html">-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="${rc.contextPath}/assets/js/moment.min.js"></script>
    <script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>

    <!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap.min.css"> -->
    <!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap-theme.min.css"> -->
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
    <script type="text/javascript" src="${rc.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>

    <script type="text/javascript" src="${rc.contextPath}/javascripts/echarts.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/javascripts/china.js"></script>
    <script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
    <script type="text/javascript">
        jQuery(function ($) {

            var message = "${message}";
            if (!isEmpty(message)) {
                showMsg(message);
            }

            $("#searchBtn").on("click", function () {
                if ($("#deviceToken").val()) {
                    $(this).attr("disabled", "true");
                    $(this).attr("readOnly", "true");
                    $("#searchForm").submit();
                } else {
                    showMsg("请输入设备标识");
                }

            });

            $("#exportBtn").on("click", function () {
                var elemIF = document.createElement("iframe");
                elemIF.src = '${rc.contextPath}/deviceNotificationStatistic/export?' + $("#searchForm").serialize();
                elemIF.style.display = "none";
                document.body.appendChild(elemIF);
            });
        })
    </script>


    <script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>

</body>
</html>